\chapter{TreeView Model : Représentation et manipulation de fichier XML}\label{ch:treeviewModel}

%\section
%\subsection
%\subsubsection
%\paragraph{Import à partir d'un fichier}

\section{Description}

Les fichiers produits par les éditeurs Loader et Report sont des fichiers au format XML, néanmoins ceux-ci possèdent des balises spécifiques à chacun géré par le moteur de PRISME. On souhaite offrir à l'utilisateur des possibilités de modification et d'édition graphique. Le choix s'est donc porter sur une combinaison d'une arborescence de balise sur la gauche de la page et la représentation de l'élément sélectionné au sein de l'arbre à droite (type explorateur, \ldots).

Néanmoins, les différentes balises de ces éditeurs sont non-exhaustives (de nouvelles balises peuvent être ajoutées), et certaines balises spécifiques n'ont pas forcément besoin de représentation graphique. Un comportement par défaut est donc définit pour ces cas.

\section{Builder}

Le builder est l'outil qui va nous permettre d'interpréter nos données vers notre arborescence d'objet \textit{InterpretorNode}. En fonction du format d'entrée, la classe de Builder se doit de changer et l'on doit adapter la lecture pour arriver à lire les diverses représentation de nos fichiers.

Ainsi, l'algorithme de \textit{BuilderXml} est basé sur l'api de lecture de document XML \textit{SAX} et peut etre modéliser comme suit. 

\begin{lstlisting}[label=algo_BuilderXml,caption=Algorithme de lecture de \textit{BuilderXml}]
Variable NoeudParent, NoeudCourant;

Pour chaque Noeud XML n du Document
	Si le nom de la balise courante n possede une classe Interpretor correspondante
		alors 	NoeudCourant = nouvel objet Interpretor correspondant
				On l'attache a NoeudParent
	Sinon
		Si le NoeudParent est capable d'interpreter la balise courante
			alors NoeudParent interprete la balise courante.
		Sinon 
			On cree un  objet InterpretorNodeDefault
			On l'attache a NoeudParent
\end{lstlisting}

Les objets Builder possède également le chemin du package dans lequel il peut rechercher les classes correspondantes aux balises. De plus,on notera que la correspondance entre notre classe et la balise est obtenue en recherchant la classe ayant comme appellation :
\[ Name = Interpretor + TagBalise \]

Le \textit{BuilderJson} possède un algorithme légèrement différent puisque la source est architecturé pour s'adapter avant tout à son utilisation au sein de \textit{jstree.js} comme expliqué \ref{jstree}. Néanmoins les concepts de construction sont inchangés.

Ainsi si l'on souhaite ajouter une balise on créera une nouvelle classe \textit{interpretor}. Et si l'on souhaite améliorer/affiner l'affichage des options d'un interpreteur existant on ira modifier ses fonctions de construction.

\section{Interpretor}

L'objet interpreteur (classe \textit{Interpretor}) centralise les méthodes d'écriture et de lecture pour chacune des balises que l'on souhaite travailler(\ref{inodeVisu}). Il permet aussi de visualiser l'arborescence qu'aura notre fichier final en gérant ses fils et son père.


\begin{figure}
\centering
\includegraphics[scale=0.7]{../img/inodeDiag.jpg}
\caption{Entrées/Sortie Treeview model}
\label{inodeVisu}
\end{figure}

\subsection{Sortie XML}

Le fichier XML produit se doit d'être lisible par les outils PRISME et respecte donc leur convention (pour plus d'information, se référer à \url{http://shp.itn.ftgroup/sites/DEPFSSCA/QOS/Documentation%20utilisateurs/Forms/AllItems.aspx}).

\subsection{Sortie JSON}\label{jstree}

Suite à la décision de réaliser un panel gauche sous forme de treeview, l'outil \textit{jstree.js} a été choisi(\url{http://www.jstree.com/}). Celui-ci offre la possibilité de créer un affichage treeview depuis une entrée html, xml ou json. Le format xml étant néanmoins contraint par certaines fonctionnalités de l'api, il aurait été perturbant d'avoir 2 format XML différents pour un même interpreteur. De plus, le format JSON est plus adapté à des communications dynamique via AJAX et est simple à appréhender comme on peut le voir listing \ref{json_treeview}.

\begin{lstlisting}[label=json_treeview,caption=Exemple JSON]
{
    "data": "reports",	//Le titre de l'element principal
	    "children": [			//La liste de ses enfants
        { 							//Enfant 1
            "data": "request",					//Titre enfant 1		
            "children": [],						//Absence de fils
            "attr": {
                "rel": "request"			//attribut lie a jstree.js 
            },
            "metadata": { 	//Stockage des informations pour modifier et construire notre node
                "id": "",
                "dim": [
                    "fk_date_day",
                    "fk_date_month"
                ],
                "tag": "request",
                "star": "cdn_mc_vip_all_contents",
                "mesure": [
                    "m_nb_content"
                ],
                "filter": ""
            }
        }
    ],
    "attr": {
        "rel": "reports"		//attribut lie a jstree.js 
    },
    "metadata": { 	//Stockage des informations pour modifier et construire notre node
        "tag": "reports",
        "from_file": ""
    }
}
\end{lstlisting}

\begin{figure}
\centering
\includegraphics[scale=0.7]{../img/treeviewUml.png}
\caption{Diagramme de classe TreeViewModel}
\label{treeviewModelUml}
\end{figure}

\section{Jstree}

Le comportement de ntore affichage treeview est entièrement géré via l'outil open source \textit{jstree.js} (\url{http://www.jstree.com/}), se référer à la documentation officielle pour la majorité des questions.